<template>
    <div class="departmentPageDataBox">
        <el-table :data="data" border v-if="refreshTable" row-key="companyId" :default-expand-all="executeIsExpandAll"
            :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" style="width: 100%">
            <el-table-column v-for="item in dataTitle" :key="item.name" :prop="item.name" :label="item.title"
                :width="item.width" :align="handlerAlign(item.name)">
                <template slot-scope="props">
                    <i v-if="item.name === 'icon'" class="iconfont" :class="props.row.icon" />
                    <span v-else>{{ props.row[item.name] }}</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" align="center" width="220">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="add(scope.row)" type="text" size="small"
                        v-if="scope.row.departmentType !== 'F' && $auth.checkMenuPermissions('system:department:add')">
                        新增
                    </el-button>
                    <el-button @click.native.prevent="update(scope.row.companyId)" type="text" size="small" v-if="$auth.checkMenuPermissions('system:department:update')">
                        修改
                    </el-button>
                    <el-button @click.native.prevent="del (scope.row)" type="text" size="small"
                        v-if="scope.row.companyId !== $store.getters['user/GET_LOGIN_INFO'].companyId && $auth.checkMenuPermissions('system:department:delete')">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { noSelectText } from '@/utils/styleUtils'
export default {
    name: "departmentData",
    props: {
        //渲染组件使用的数据集
        data: {
            type: Array,
            required: false,
        },
        /**
         * 数据表格式定义
         * title: 数据表格的标题
         * name:  后端返回要渲染的字段名称
         * width: 当前数据占用列的宽度
         */
        dataTitle: {
            type: Array,
            required: true,
            default: [{ title: "标题", name: "field", width: "180" }],
        },
        /**
         * 是否折叠数据表
         */
        isExpandAll: {
            type: Boolean,
            required: true
        },
        /**
         * 新增按钮
         */
        add: {
            type: Function,
            required: true
        },
        update: {
            type: Function,
            required: true
        },
        del: {
            type: Function,
            required: true
        }
    },
    data() {
        return {
            refreshTable: true,
        }
    },
    methods: {
        //处理数据树是否折叠
        handlerExpand() {
            this.refreshTable = false;
            this.$nextTick(() => {
                this.refreshTable = true;
            })
        },
        //处理表数据的对齐方式
        handlerAlign(field) {
            switch (field) {
                case 'icon':
                case 'sort':
                case 'departmentTypeName':
                    return 'center'
                default:
                    return 'left'
            }
        }
    },
    mounted() {
        noSelectText(".departmentPageDataBox");
    },
    computed: {
        executeIsExpandAll() {
            this.handlerExpand();
            return this.isExpandAll;
        }
    },
};
</script>
  
<style scoped lang="scss">
.el-table {
    margin-top: 18px;
    height: 75vh;
}
</style>
  